<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>

<div id="myApp">
    <h3>全选、反选:</h3>
    <h3>1、给全选、反选的checkbox加上事件(方法) 下面所有的checkbox状态值跟随变化</h3>
    <h3>2、监控全选、反选。。。。</h3>
    <table border="1">
        <tr>
            <td>
                <input type="checkbox" v-on:click="selectAll" >
            </td>
            <td>序号</td>
            <td>ID</td>
            <td>用户名</td>
            <td>密码</td>
        </tr>
        <tr v-for="(user,index) in users">
            <td>
                <input type="checkbox" v-bind:value="user.id" v-model="ids" >
            </td>
            <td v-text="index + 1"></td>
            <td v-text="user.id"></td>
            <td v-text="user.userName"></td>
            <td v-text="user.password"></td>
        </tr>
    </table>
</div>

</body>

<script>
    const app = Vue.createApp({
        data(){
            return{
                users:[ //数组
                    {id:1,userName:'张三',password:'123456'},//json对象
                    {id:2,userName:'李四',password:'123456'},
                    {id:3,userName:'王五',password:'123456'},
                    {id:4,userName:'赵六',password:'123456'},
                ],
                ids:[]
            }
        },
        methods:{
            selectAll(){
                var self = this
                //event:事件/方法调用的时候 会有一个event事件对象
                if(event.target.checked){
                    //将ids填满
                    //forEach:循环
                    /*this.users.forEach(function(e,index){
                        //匿名内部类 不能直接引用外部变量
                        self.ids.push(e.id)
                    })*/
                    this.users.forEach(e=>{
                        self.ids.push(e.id)
                    })
                }else{
                    console.log('yyyy')
                    //反选 将ids清空
                    this.ids = []
                }
            }
        }
    }).mount('#myApp')
</script>

</html>